<template>
    <div class="questionnaire">
        <el-row class="form">
            <el-form :inline="true">
                <el-form-item label="活动名称">
                    <el-select v-model="search.activityId"
                               filterable
                               clearable
                               placeholder="选择活动"
                               :loading="search.loading">
                        <el-option v-for="(item, value) in activityList"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                            <span style="float: left">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调研标题">
                    <el-input v-model="search.title" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号">
                    <el-input v-model="search.phoneNum" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="query(1)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="data">
            <el-table :data="page.list"
                      v-loading="page.loading"
                      stripe border
                      style="width: 100%">
                <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
                <el-table-column prop="activityName" label="问卷名称" width="220"></el-table-column>
                <el-table-column prop="question" label="问题"></el-table-column>
                <el-table-column prop="answer" label="回答"></el-table-column>
                <el-table-column prop="phoneNum" label="用户手机号" width="120" align="center"></el-table-column>
                <el-table-column prop="createTime" label="时间" width="160" align="center"></el-table-column>
            </el-table>
            <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="page.totalCount"
                :page-size='page.size'
                :current-page.sync="page.page"
                @current-change="query(null)">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>

    export default {
        name: "Questionnaire",
        data() {
            return {
                search: {
                    activityId: '',
                    title: '',
                    phoneNum: '',
                    loading: true
                },
                page: {
                    page: 1,
                    size: 10,
                    totalCount: 0,
                    totalPage: 0,
                    list: [],
                    loading: true
                },
                loading: false,
                activityList: [],
            }
        }, mounted() {
            this.initActivityList();
            this.query();
        },
        methods: {
            initActivityList() {
                let _this = this;
                _this.search.loading = true;
                _this.axios({
                    url: '/activityConsole/activity/info/findAllName'
                }).then(res => {
                    let array = [];
                    for (let key in res.data) {
                        array.push({id: key, name: res.data[key]});
                    }
                    _this.activityList = [...array.reverse()];
                    _this.search.loading = false;
                }).catch(e => {
                    _this.search.loading = false;
                    console.log(e);
                })
            },
            query(page) {
                let _this = this;
                _this.page.page = page || _this.page.page;
                _this.page.loading = true;
                _this.axios({
                    url: '/activityConsole/questionnaire/answers',
                    params: Object.assign({
                        page: _this.page.page,
                        size: _this.page.size
                    }, _this.search)
                }).then(res => {
                    _this.page.list = res.data.data.content;
                    _this.page.totalCount = res.data.data.totalCount;
                    _this.page.totalPage = res.data.data.totalPage;
                    _this.page.loading = false;
                }).catch(e => {
                    _this.page.loading = false;
                    console.log(e);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .questionnaire {
        .form,
        .data,
        .el-pagination {
            margin: 30px 30px 0;
        }
        .form {
            .el-form-item {
                margin-bottom: 0;
            }
            .el-button {
                padding: 10px 20px;
            }
        }
        .el-pagination {
            text-align: center;
        }
    }
</style>
